﻿@page "/chart/tooltip-template"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    This sample visualizes the USA wheat production data with the default line series in the chart. Data points are enhanced with marker and tooltip.
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the background image and the tooltip template for the chart. You can use the <code>BackgroundImage</code> property and the <code>ChartTooltipSettings</code> class to configure the background image and the tooltip template respectively.</p>
    <p>More information about the tooltip template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/tool-tip/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="USA Wheat Production" BackgroundImage="images/chart/wheat.png" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelFormat="y"
                           IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLabelStyle Color="white"></ChartAxisLabelStyle>
            <ChartAxisLineStyle Color="#EFEFEF" Width="3"></ChartAxisLineStyle>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis RangePadding="ChartRangePadding.None" Title="Billion Bushels">
            <ChartAxisLineStyle Width="3" Color="#EFEFEF"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="white"></ChartAxisLabelStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Color="#EFEFEF" Width="2"></ChartAxisMajorGridLines>
            <ChartAxisTitleStyle Color="white"></ChartAxisTitleStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true">
            <Template>
                @{
                    var data = context as ChartTooltipInfo;
                    <div>
                        <table style="width:100%;  border: 1px solid black;" class="table-borderless">
                            <tr>
                                <th rowspan="2" style="background-color: #C1272D">
                                    <img src="images/chart/grain.png" />
                                </th>
                                <td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding-left: 5px">@data.X</td>
                            </tr>
                            <tr>
                                <td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 18px; color: #FFFFFF; font-weight: bold; padding-left: 5px">@data.Y</td>
                            </tr>
                        </table>
                    </div>
                }
            </Template>
        </ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ConsumerDetails" XName="Year" Width="2" Fill="#333333"
                         YName="Productivity" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Width="10" Height="10" Fill="#C1272D">
                    <ChartMarkerBorder Color="#333333" Width="2"></ChartMarkerBorder>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<ChartData> ConsumerDetails { get; set; } = new List<ChartData>
    {
        new ChartData { Year = 2002, Productivity = 1.61 },
        new ChartData { Year = 2003, Productivity = 2.34 },
        new ChartData { Year = 2004, Productivity = 2.16 },
        new ChartData { Year = 2005, Productivity = 2.10 },
        new ChartData { Year = 2006, Productivity = 1.81 },
        new ChartData { Year = 2007, Productivity = 2.05 },
        new ChartData { Year = 2008, Productivity = 2.50 },
        new ChartData { Year = 2009, Productivity = 2.22 },
        new ChartData { Year = 2010, Productivity = 2.21 },
        new ChartData { Year = 2011, Productivity = 2.00 },
        new ChartData { Year = 2012, Productivity = 1.70 },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class ChartData
    {
        public double Year { get; set; }
        public double Productivity { get; set; }
    }

}